<template>
  <div class="app-container">
    <div class="filter-container tw-filter">
      <el-form ref="dataForm" :model="form" label-position="right" label-width="180px" style="width: 800px; margin:0 auto;">
        <el-form-item label="RAM账号 KeyId" prop="al_mail_key_id">
          <el-input  v-model="form.al_mail_key_id" placeholder="请输入RAM账号 KeyId" class="filter-item tw-filter-input" style="width:500px"/>
        </el-form-item>
        <el-form-item label="RAM账号 KeySecret" prop="al_mail_key_secret">
          <el-input  v-model="form.al_mail_key_secret" placeholder="请输入RAM账号 KeySecret" class="filter-item tw-filter-input" style="width:500px"/>
        </el-form-item>
        <el-form-item label="短信签名名称" prop="al_mail_signature">
          <el-input  v-model="form.al_mail_signature" placeholder="短信签名名称" style="display:flex; width:500px" class="filter-item tw-filter-input"/>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button style="margin-left:40%;" v-waves class="filter-item tw-filter-button" type="primary" @click="updateData()">保存数据</el-button>
    </div>

  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive

export default {
  directives: { waves },
  data() {
    return {
      apiPath: 'project.service',
      // 表单数据
      form: {
        al_mail_key_id:'',         //RAM账号 KeyId
        al_mail_key_secret:'',     //RAM账号 KeySecret
        al_mail_signature:'',      //邮件签名名称
      }
    }
  },
  created() {
    // 获取详情
    this.$api.getDetail({}, this.apiPath).then(response => {
      //数据处理
      for(let key in this.form){
        if(response.detail.hasOwnProperty(key)){
          this.form[key] = response.detail[key]
        }
      }
    })
  },
  methods: {
    // 保存数据
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$api.edit(this.form, this.apiPath).then(response => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          })
        }
      })
    }
    
  }
}
</script>
